<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/jquery.mCustomScrollbar.min.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="js/Player.js"></script>
    <script src="js/Progress.js"></script>
    <script src="js/Lyric.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
<header>
    <h1 class="logo"><a href="javascript:;"><img src="images/player_logo.png"></a></h1>
    <div class="login-box">
        <a class="login" href="javascript:;">登录</a>
        <a class="setting" href="javascript:;">设置</a>
    </div>
</header>
<section class="content">
    <div class="center">
        <!--左边布局-->
        <div class="content-left">
            <div class="tool-bar">
                <ul>
                    <li><a href="javascript:;"><i></i>收藏</a></li>
                    <li><a href="javascript:;"><i></i>添加到</a></li>
                    <li><a href="javascript:;"><i></i>下载</a></li>
                    <li><a href="javascript:;"><i></i>删除</a></li>
                    <li><a href="javascript:;"><i></i>清空列表</a></li>
                </ul>
            </div>
            <div class="music-box" data-mcs-theme="minimal-dark">
                <div class="music-content">
                    <ul class="music-list">
                        <li class="music-list-header">
                            <div class="checkbox"><span></span></div>
                            <div class="index"><a>0</a></div>
                            <div class="title">
                                <div class="title-text"><a title="">歌曲</a></div>
                            </div>
                            <div class="singer"><a href="javascript:;" title="">歌手</a></div>
                            <div class="duration">
                                <a>时长</a>
                                <a href="javascript:;" title="删除"></a>
                            </div>
                        </li>
                        <!--waiting for append new node-->
                    </ul>
                </div>
                <!--滚动条:备用，自定义-->
                <!--<div class="scroll"></div>-->
            </div>
        </div>

        <!--右边布局-->
        <div class="content-right">
            <div class="music-img">
                <img src="">
            </div>
            <div class="music-info">
                <p>歌曲名：<a href="javascript:;" title=""></a></p>
                <p>歌手名：<a href="javascript:;" title=""></a></p>
                <p>专辑名：<a href="javascript:;" title=""></a></p>
            </div>
            <div class="lyric-box">
                <ul></ul>
            </div>
        </div>
    </div>
</section>
<footer>
    <div class="center">
        <div class="control-btn">
            <a class="bg pre" href="javascript:;" title="alt+←"></a>
            <a class="bg play" href="javascript:;" title="[空格]"></a>
            <a class="bg stop" href="javascript:;" title="[空格]"></a>
            <a class="bg next" href="javascript:;" title="alt+→"></a>
        </div>
        <div class="player">
            <div class="player-info">
                <span class="info">
                    <a href="javascript:;"></a>
                    -
                    <a href="javascript:;"></a>
                </span>
                <span class="time"><span class="now">00:00</span> / <span class="current"></span></span>
            </div>
            <div class="progress">
                <span class="progress-bg"></span>
                <span class="progress-bar bg"></span>
            </div>
        </div>
        <div class="player-tools">
            <span class="cyclic">
                <a class="on bg" href="javascript:;" title="列表循环[O]"></a>
                <a class="bg" href="javascript:;" title="顺序播放[O]"></a>
                <a class="bg" href="javascript:;" title="随机播放[O]"></a>
                <a class="bg" href="javascript:;" title="单曲循环[O]"></a>
            </span>
            <span class="favorite">
                    <a class="on bg" href="javascript:;" title="喜欢[V]"></a>
                    <a class="bg" href="javascript:;" title="取消喜欢[V]"></a>
            </span>
            <span class="download">
                    <a class="bg" href="javascript:;" title="下载[D]"></a>
            </span>
            <span class="comment">
                    <a class="bg" href="javascript:;" title="评论">
                        <i class="comment-num">999+</i>
                    </a>
            </span>
            <span class="only">
                    <a class="on bg" href="javascript:;" title="打开纯净模式[C]"></a>
                    <a class="bg" href="javascript:;" title="关闭纯净模式[C]"></a>
            </span>
        </div>
        <div class="volume">
            <span class="volume-icon bg"></span>
            <div class="progress">
                <span class="progress-bg"></span>
                <span class="progress-bar bg"></span>
            </div>
        </div>
    </div>
</footer>

<div class="mask_bg"></div>
<div class="mask"></div>
<audio src=""></audio>
</body>
</html>